<template>
	<el-result icon="warning" subTitle="删除当前登录账号及其所有数据" title="账号删除">
		<template #extra>
			<el-popconfirm :hide-after="0" confirm-button-type="danger" title="永久删除当前登录账号？此操作无法恢复。" width="auto"
			               @confirm="drawDown">
				<template #reference>
					<el-button :loading="loading" icon="el-icon-Delete" type="danger">删除账号</el-button>
				</template>
			</el-popconfirm>
		</template>
	</el-result>
</template>

<script lang="ts" setup>

import {drawDownMqApi} from '@/api/system/myself.api'
import {useUserStore} from '@/stores/modules/user.store'
import router from '@/router'
import {messageError} from '@/utils/commonUtil'
import {ref} from 'vue'
import {Local} from '@/utils/storageUtil'
import {cacheKeys} from '@/stores/constant/cacheKey'

const userStore = useUserStore()
const loading = ref(false)

const drawDown = () => {
	if (!userStore.userId) {
		messageError('无法获取用户id')
		return
	}
	loading.value = true
	drawDownMqApi(userStore.userId).then(async () => {
		await userStore.logout()
		Local.remove(cacheKeys.TOKEN)
		await router.push('/login')
	}).finally(() => {
		loading.value = false
	})
}

</script>
